<template>
	<div class="gantt">
		<div class="legend">
			<!-- 渲染图例 -->
			<i class="plan"></i>
			<label>计划</label>
			<i class="actuality"></i>
			<label>实际</label>
		</div>
		<el-table :data="data">
			<!-- 渲染表格 -->
			<el-table-column 
				v-for="(column, index) in columnsConfig" 
				:key="index"
				v-bind="column"
			></el-table-column>
			<el-table-column
				v-for="monthItem in monthData"
				:key="monthItem.month"
				align="center"
				min-width="80"
				:prop="monthItem.month"
				:label="monthItem.month"
			>
				<template #header>
					<span>{{ monthItem.month.substring(5) + '月' }}</span>
				</template>
				<el-table-column
					v-for="day in monthItem.dayArray"
					:key="day"
					align="center"
					:width="50"
					:prop="day"
				>
					<template #header>
						<span>{{ day.substring(8) }}</span>
					</template>
					<template #default="scope">
						<i class="plan" v-if="showPlan(scope)"></i>
						<i class="empty" v-else></i>
						<i class="actuality" v-if="showActuality(scope)"></i>
						<i class="empty" v-else></i>
					</template>
				</el-table-column>
			</el-table-column>
		</el-table>
	</div>
</template>

<script setup>
import { ref, watch, defineProps, onMounted} from 'vue';

const props = defineProps({
	data: {
		type: Array,
		default: () => []
	},
	columnsConfig: {
		type: Array,
		default: ()=>[]
	},
	ganttConfig: {
		type: Object,
		default: () => ({
			planBeginColumn: 'planBegin',
			planEndColumn: 'planEnd',
			actualityBeginColumn: 'actualityBegin',
			actualityEndColumn: 'actualityEnd'
		})
	}
})

const monthData = ref({})

const init = () => {
	let minDate = undefined
	let maxDate = undefined
    // console.log(props.data)
	



	//props.data.forEach((row, index) =>

    for(let i=0; i < props.data.length;i++)
    {
        let row = props.data[i]
		let current = new Date(row[props.ganttConfig.planBeginColumn])
		if (minDate) {
			minDate = minDate.getTime() < current.getTime() ? minDate : current
		} else {
			minDate = current
		}
		current = new Date(row[props.ganttConfig.planEndColumn])
		if (maxDate) {
			maxDate = maxDate.getTime() > current.getTime() ? maxDate : current
		} else {
			maxDate = current
		}
		current = props.ganttConfig.actualityBeginColumn && row[props.ganttConfig.actualityBeginColumn] ? new Date(row[props.ganttConfig.actualityBeginColumn]) : undefined
		if (current) {
			minDate = minDate.getTime() < current.getTime() ? minDate : current
		}
		current = props.ganttConfig.actualityEndColumn && row[props.ganttConfig.actualityEndColumn] ? new Date(row[props.ganttConfig.actualityEndColumn]) : undefined
		if (current) {
			maxDate = maxDate.getTime() > current.getTime() ? maxDate : current
		}
	}
 
	if(minDate  == null){
		return
	}
	// 甘特图前后各放宽2天
	minDate = new Date(minDate.getTime() - 2 * 24 * 60 * 60 * 1000)
	maxDate = new Date(maxDate.getTime() + 2 * 24 * 60 * 60 * 1000)
	let current = new Date(format(minDate))
	console.log('2--minDate', minDate)
	console.log('1--minDate', maxDate)
	while(!isAfter(current, maxDate)) {
		const month = formatYearMonth(current)
		const day = format(current)
		if (monthData.value[month]) {
			monthData.value[month].dayArray.push(day)
		} else {
			monthData.value[month] = {
				month: month,
				dayArray: [day]
			}
		}
		// 加一天
		current = after(current)
	}
}
/**
 * 格式化 YYYY-MM-DD
 */
const format = (date) => {
	const day = String(date.getDate()).padStart(2, '0')
	return formatYearMonth(date) + '-' + day
}
/**
 * 格式化 YYYY-MM
 */
const formatYearMonth = (date) => {
	const year = date.getFullYear()
	const month = String(date.getMonth() + 1).padStart(2, '0')
	return year + '-' + month
}
/**
 * 加一天
 */
const after = (date) => {
	return new Date(date.getTime() + 24 * 60 * 60 * 1000)
}
/**
 * date1是否大于等于date2
 */
const isAfter = (date1, date2) => {
	return date1.getTime() >= date2.getTime()
}
/**
 * 显示计划进度
 */
const showPlan = ({row, column}) => {
	const currentDay = new Date(column.property)
	const begin = new Date(row[props.ganttConfig.planBeginColumn])
	const end = new Date(row[props.ganttConfig.planEndColumn])
	return currentDay.getTime() >= begin.getTime() && currentDay.getTime() <= end.getTime()
}
/**
 * 显示实际进度
 */
const showActuality = ({row, column}) => {
	const currentDay = new Date(column.property)
	const begin = props.ganttConfig.actualityBeginColumn || row[props.ganttConfig.actualityBeginColumn] ? new Date(row[props.ganttConfig.actualityBeginColumn]) : undefined
	const end = props.ganttConfig.actualityEndColumn || row[props.ganttConfig.actualityEndColumn] ? new Date(row[props.ganttConfig.actualityEndColumn]) : undefined
	return begin && end && currentDay.getTime() >= begin.getTime() && currentDay.getTime() <= end.getTime()
}
watch(() => props.data, () => {
	console.log('-ddd--', props.data)
	init()
	console.log('---ccc', monthData.value)
})
onMounted(()=>{
	console.log('-11--', props.data)
	init()
	console.log('---333', monthData.value)
})
</script>

<style scoped>
	.plan {
		display: flex;
		width: calc(100% + 24px);
		height: 16px;
		background-color: limegreen;
		margin: 0 -12px;
	}
	.actuality {
		display: flex;
		width: calc(100% + 24px);
		height: 16px;
		background-color: yellow;
		margin: 0 -12px;
	}
	.empty {
		display: flex;
		width: calc(100% + 24px);
		height: 16px;
		margin: 0 -12px;
	}
	.legend {
		display: flex;
		line-height: 40px;
		flex-direction: row;
		justify-content: right;
		align-items: center;
		padding: 0 20px;
		
		* {
			margin: 0 5px;
		}
		
		i {
			width: 32px;
			height: 16px;
		}
	}
</style>
